<template>
  <el-container style="min-width: 100%;min-height: 100%">
    <main-nav-menu :isCollapse="isCollapse" :width="menuWidth" @toggleMenu="toggleMenu"></main-nav-menu>
    <el-container class="app-content" :style="{'margin-left':marginLeft}">
      <main-header :isCollapse="isCollapse" @toggleMenu="toggleMenu"></main-header>
      <app-main></app-main>
    </el-container>
<!--    <SystemChat></SystemChat>-->
  </el-container>
</template>
<style>
.app-content {
  display: block;
  margin-left: 201px;
  position: relative;
  overflow: hidden;
  transition: margin-left 0.5s;
}

.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}

</style>

<script>
import MainNavMenu from "@/components/Layout/MainNavMenu";
import MainHeader from "@/components/Layout/MainHeader";
import AppMain from "@/components/Layout/AppMain";
import SystemEnvironment from '@/utils/environment'
import { mapGetters } from 'vuex'

export default {
  components: {AppMain, MainHeader, MainNavMenu},
  data() {
    return {
      ...mapGetters(['token']),
      isCollapse: false,
      menuWidth: "",
      marginLeft: "",
      webSocket:{}
    }
  },
  mounted() {
    this.webSocket = new WebSocket(SystemEnvironment.getWebSocketBaseUrl()+"/notice-ws/websocket/"+encodeURI(this.token()));
    this.webSocket.onmessage = (message)=>{
      let data = message.data;
      let realData = JSON.parse(data);
      this.$notify.info({
        title: '消息通知',
        message: realData.content
      });
    }
  },
  methods: {
    toggleMenu(val) {
      this.isCollapse = val;
      if (this.isCollapse) {
        this.menuWidth = "64px !important";
        this.marginLeft = "64px";
      } else {
        this.menuWidth = "";
        this.marginLeft = "201px";
      }
    }
  }
};
</script>